<template>
    <Tabs :value="name">
        <TabPane label="关系图" name="Image">
            <div class="CodeTabPaneView">
                <div class="imgView"><img src="./image.png" alt /></div>
            </div>
        </TabPane>
        <TabPane label="RunView.vue" name="RunView">
            <div class="CodeTabPaneView">
                <pre class="line-numbers"><code class="language-html">{{ Code[0] }}</code></pre>
            </div>
        </TabPane>
        <TabPane label="FormView.vue" name="FormView">
            <div class="CodeTabPaneView">
                <pre class="line-numbers"><code class="language-html">{{ Code[1] }}</code></pre>
            </div>
        </TabPane>
        <TabPane label="FormItemText.vue" name="FormItemText">
            <div class="CodeTabPaneView">
                <pre class="line-numbers"><code class="language-html">{{ Code[2] }}</code></pre>
            </div>
        </TabPane>
        <TabPane label="FormItemSelect.vue" name="FormItemSelect">
            <div class="CodeTabPaneView">
                <pre class="line-numbers"><code class="language-html">{{ Code[3] }}</code></pre>
            </div>
        </TabPane>
        <TabPane label="FormItemNumber.vue" name="FormItemNumber">
            <div class="CodeTabPaneView">
                <pre class="line-numbers"><code class="language-html">{{ Code[4] }}</code></pre>
            </div>
        </TabPane>

        <TabPane label="config.js" name="config">
            <div class="CodeTabPaneView">
                <pre class="line-numbers"><code class="language-javascript">{{ Code[5] }}</code></pre>
            </div>
        </TabPane>
        <TabPane label="TypeData.js" name="TypeData">
            <div class="CodeTabPaneView">
                <pre class="line-numbers"><code class="language-javascript">{{ Code[6] }}</code></pre>
            </div>
        </TabPane>
        <TabPane label="dist.js" name="dist">
            <div class="CodeTabPaneView">
                <pre class="line-numbers"><code class="language-javascript">{{ Code[7] }}</code></pre>
            </div>
        </TabPane>
    </Tabs>
</template>
<script>
import RunView from './RunView.vue?raw'
import FormView from './FormView.vue?raw'
import FormItemText from './FormItemText.vue?raw'
import FormItemSelect from './FormItemSelect.vue?raw'
import FormItemNumber from './FormItemNumber.vue?raw'

import config from './config?raw'
import TypeData from './TypeData?raw'
import dist from './dist?raw'

export default {
    data() {
        return {
            name: 'Image',
            Code: [RunView, FormView, FormItemText, FormItemSelect, FormItemNumber, config, TypeData, dist]
        }
    },
    mounted() {
        setTimeout(() => {
            Prism.highlightAll()
        }, 100)
    }
}
</script>